import React,{useState,useEffect} from 'react'
import {Outlet,useNavigate} from 'react-router-dom'
import axios from 'axios'

export default function Index() {
    let [flag,setFalg] = useState(false)
    let [list,setList] = useState([])
    let navigate = useNavigate()
    useEffect(()=>{
        getList()
    },[])
    let getList =async()=>{
        let {data} = await axios.get('http://localhost:3000/list') 
        setList(data)
    }
  return (
    <div style={{width:'100%',display:'flex'}}>
        <div style={{width:'20%'}}>
            <h3 onClick={()=>navigate('/search')}>新建项目</h3>
            <p onClick={()=>setFalg(!flag)}>项目</p>
            <ul>
                {list.map((item)=>(
                    <li key={item._id} onClick={()=>navigate('/index/list')} style={{color:item.color}}>{item.name}</li>
                ))}
            </ul>
        </div>
        <div style={{width:'80%'}}>
            <Outlet></Outlet>
        </div>
    </div>
  )
}
